<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/9/16
  Time: 9:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>管理员管理</title>
        <style>
            .layui-table-cell {
                /* height: auto !important;*/
                white-space: normal;
                width: 50px;
            }
        </style>
        <meta charset="utf-8">
        <link href="../layui/css/layui.css" rel="stylesheet">
        <script src="../js/jquery-1.12.4.js" type="text/javascript"></script>
        <script src="../layui/layui.js" type="text/javascript"></script>
        <script type="text/javascript">


        layui.use(['table','form'],function () {
                var table = layui.table;
                var form = layui.form;

                //数据展示
                table.render({
                    elem: '#adminTable',
                    url: '${pageContext.request.contextPath}/admin/showPageAdmin', //数据接口
                    page: true, //开启分页
                    toolbar:"#adminToolbar",
                    cols: [[ //表头
                        {type:"checkbox"},
                        { title: '管理员编号',field: 'id', width:150, sort: true,align:'center'},
                        {title: '管理员名字',field: 'username',align:'center'},
                        {title: '管理员密码',field: 'password',align:'center'},
                        {title: '操作',templet:"#doTemplet",align:'center'}
                    ]]
                });

                //添加管理员按钮的监听事件
                form.on('submit(addAdmin)', function(data){
                    /*console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                    console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                    console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}*/
                    //var formDate = new FormData(document.getElementById("addBannerForm"));
                    $.ajax({
                        url:"${pageContext.request.contextPath}/admin/addAdmin",
                        type:"post",
                        //processData:false,
                        //contentType:false,
                       // async:false,
                        //cache:false,
                        data:data.field,
                        success:function (data) {
                            layer.closeAll("page");
                            if (data.isAdd) {
                                layer.alert("添加成功",{time:1000});

                            }else {
                                layer.alert("添加失败",{time:1000});
                            }
                            //修改成功之后刷新页面数据 重载页面
                            table.reload("adminTable");
                        }
                    })
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                });

                //修改管理员的表单提交的监听事件
                form.on('submit(updateAdmin)', function(data){
                    /*console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                    console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                    console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}*/
                    //var formDate = new FormData(document.getElementById("addBannerForm"));
                    $.ajax({
                        url:"${pageContext.request.contextPath}/admin/updateAdmin",
                        type:"post",
                        //processData:false,
                        //contentType:false,
                        // async:false,
                        //cache:false,
                        data:data.field,
                        success:function (data) {
                            layer.closeAll("page");
                            if (data.isUpdate) {
                                layer.alert("修改成功",{time:1000});

                            }else {
                                layer.alert("修改失败",{time:1000});
                            }
                            //修改成功之后刷新页面数据 重载页面
                            table.reload("adminTable");
                        }
                    })
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                });

            })

                //点击添加按钮弹出添加管理员的form表单
            function addAdmin() {
                //打开之前重置一下form表单 获取form标签的dom元素
               $("#addAdminForm").get(0).reset();
                layer.open({
                    title:"添加管理员",
                    type: 1,
                    content: $("#addAdminForm"), //这里content是一个普通的String
                    area:"400px",
                    maxmin: true
                });
            }

            //点击修改时 弹出一个有值的form表单进行修改
            function updateAdmin(id, username, password) {
                //先将当前行的数据添加到表单中
                $("#id").val(id);
                $("#username").val(username);
                $("#password").val(password);
                //弹出form表单
                layer.open({
                    title:"修改管理员",
                    type: 1,
                    content: $("#updateAdminForm"), //这里content是一个普通的String
                    area:"400px",
                    maxmin: true
                });
            }
            
            //点击删除向后台发送ajax请求执行删除
        function deleteAdmin(id) {
            $.ajax({
                url:"${pageContext.request.contextPath}/admin/deleteAdmin",
                data:{"id":id},
                success:function (data) {
                    if (data.isDelete) {
                        layer.alert("删除成功",{time:1000});
                    }else {
                        layer.alert("删除失败",{time:1000});
                    }
                    //刷新表单
                    var table = layui.table;
                    table.reload("adminTable")
                }
            })
        }
        </script>
        <script type="text/html" id="doTemplet">
            <button type="button" class="layui-btn" onclick="updateAdmin('{{d.id}}','{{d.username}}','{{d.password}}')">
                修改
            </button>
            <button type="button" class="layui-btn layui-btn-danger" onclick="deleteAdmin('{{d.id}}')">
                删除
            </button>
        </script>
    </head>
    <body>
        <%--管理员展示的数据表格--%>
        <table id="adminTable" lay-filter="admin_table" class=".layui-table-cell"></table>

        <%--数据表格绑定工具栏--%>
        <div id="adminToolbar" style="display: none;">
            <button type="button" class="layui-btn" onclick="addAdmin()">
                <i class="layui-icon layui-icon-add-1"></i>添加管理员
            </button>
            <button type="button" class="layui-btn layui-btn-danger" onclick="multiDeleteAdmin()">
                <i class="layui-icon layui-icon-delete"></i>批量删除
            </button>
        </div>

        <%--添加管理员的form表单--%>
        <form class="layui-form" action="" id="addAdminForm" style="display: none">
            <div class="layui-form-item">
                <label class="layui-form-label">账户</label>
                <div class="layui-input-block">
                    <input type="text" name="username" required  lay-verify="required" placeholder="请输入管理员账户" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">账户</label>
                <div class="layui-input-block">
                    <input type="text" name="password" required  lay-verify="required" value="123456" placeholder="请输入管理员账户" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="addAdmin">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

        <%--修改管理员的form表单--%>
        <form class="layui-form" action="" id="updateAdminForm" style="display: none">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="text" id="id" style="display: none" name="id" required  lay-verify="required" placeholder="请输入管理员账户" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">账户</label>
                <div class="layui-input-block">
                    <input id="username" type="text" name="username" required  lay-verify="required" placeholder="请输入管理员账户" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">账户</label>
                <div class="layui-input-block">
                    <input id="password" type="text" name="password" required  lay-verify="required" value="123456" placeholder="请输入管理员账户" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="updateAdmin">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </body>
</html>
